<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" name="referrer" content="no-referrer">
    <title th:text="${article ne null}?'LEMON-编辑-'+${article?.title}:'LEMON-创作'"></title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/css/wangEditor-fullscreen-plugin.css}">
    <link rel="stylesheet" th:href="@{/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/css/blog.css}">
</head>
<body>
<div class="issue">
    <form id="issueForm" th:action="@{/article/edit}" method="post" enctype="multipart/form-data">
        <div class="row" style="margin: 0;">
            <input type="hidden" name="id" th:if="${article ne null}" th:value="${article?.id}">
            <input type="hidden" name="uId" th:if="${session?.loginUser ne null}" th:value="${session?.loginUser?.id}">
            <input type="hidden" name="author" th:if="${session?.loginUser ne null}"
                   th:value="${session?.loginUser?.nickname}">
            <div class="col-lg-12" style="padding: 0">
                <div class="input-group">
                    <input type="text" class="form-control input-lg" id="title" name="title"
                           placeholder="文章的标题" th:value="${article?.title}"
                           style="border:0;border-radius: 0">
                    <div class="input-group-btn">
                        <a href="javascript:history.go(-1);" type="button" class="btn btn-default">返回</a>
                        <button type="button" class="btn btn-default gradual-bg" onclick="check()"
                                th:text="${article!=null}?'更新':'发布'">
                        </button>
                        <button type="button" class="btn btn-default gradual-bg dropdown-toggle" data-toggle="dropdown"
                                aria-haspopup="true" aria-expanded="false">
                            <span class="caret"></span>
                            <span class="sr-only">Toggle Dropdown</span>
                        </button>
                        <ul id="myMenu" class="dropdown-menu dropdown-menu-right"
                            style="z-index: 99999;padding: 10px;min-width: 250px">
                            <li>
                                <h4>选择封面图片</h4>
                                <a class="thumbnail" style="padding: 4px">
                                    <div class="cover">
                                        <img class="imgSrc"
                                             style="height: 125px;display: block;"
                                             th:src="${article?.cover}">
                                        <input type="file" class="imgFile" name="file"
                                               style="position:absolute;top: 43px;width: 215px; height: 125px;opacity:0;cursor:pointer;">
                                    </div>
                                </a>
                            </li>
                            <li>
                                <h4>选择文章的标签（单选）</h4>
                                <div class="tag-list" style="white-space: normal;">
                                    <div th:each="tag:${tagList}" th:text="${tag?.name}" class="item"
                                         th:classappend="${article?.tag eq tag?.name}?'active':''">标签名

                                    </div>
                                    <input type="hidden" id="tag" name="tag">
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div id="editor" th:utext="${article?.content}">
            </div>
            <textarea id="content" class="hidden" name="content"></textarea>
        </div>
    </form>
</div>

<div id="msgAlert" th:if="${msg ne '' and msg ne null}" class="alert alert-danger alert-dismissible" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
            aria-hidden="true">&times;</span></button>
    <strong th:text="${msg}"></strong>
</div>

<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/wangEditor.min.js}"></script>
<script th:src="@{/js/wangEditor-fullscreen-plugin.js}"></script>
<script th:src="@{/js/all.js}"></script>
<script>
    $(function () {
        //文件上传
        editorConfig();
        //实时预览图片
        previewImage();

        $('body').on('click', '.dropdown-menu li', function (e) {
            e.stopPropagation();

        });

        $(".tag-list .item").click(function () {
            var _this = $(this);
            $(".tag-list .item").removeClass("active");
            _this.addClass("active");
            $("#tag").val(_this.text());
            console.log($("#tag").val())
        })

    });

    function check() {
        //获取标题并判断标题是否为空
        if (isEmpty($("#title").val())) {
            alert("请输入标题");
            return false;
        }

        //获取文本内容并判断内容是否为空
        var content = $("#content").val();
        if (isEmpty(content) || $.trim(content) == $.trim("<p><br></p>")) {
            alert("请输入内容");
            return false;
        }

        if (isEmpty($("#tag").val())) {
            alert("请选中文章的标签");
            return false;
        }

        $("#issueForm").submit();
    }
</script>
</body>
</html>